<template>
<div>
    <v-mask v-show="mask" />
    <svg
      preserveAspectRatio="xMidYMid meet"
      fill="none"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      class="loading"
      :style="{ width, height }"
    >
      <g>
        <g fill-rule="evenodd" stroke-width="1.2">
          <circle opacity=".3" cx="12" cy="12" r="11"></circle>
          <path
            d="M12 1c2.8 0 5.6 1.1 7.8 3.2 4.3 4.3 4.3 11.3 0 15.6s-11.3 4.3-15.6 0"
          ></path>
        </g>
      </g>
    </svg>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "v-loading",
  props: {
    mask: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "0.8rem",
    },
    height: {
      type: String,
      default: "0.8rem",
    },
  },
})
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10003;
  width: 0.8rem;
  height: 0.8rem;
  margin: auto;
  display: flex;
  padding: 0;
  color: #1989fa;
  font-size: 0.24rem;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
</style>